<template>
  <div>
    <!-- <div class="van-row">
        <div class="van-col van-col--6">
          <img  src="../../assets/avatar.png">
        </div>
        <div class="van-col van-col--10">名字</div>
        <div class="van-col van-col--8">
            <i class="van-icon van-icon-cross"></i>
        </div>
    </div> -->
    <van-row @click="goLogin">
      <van-col span="6">
        <img :src="avatarSrc" alt="" />
      </van-col>
      <van-col span="10">{{ nickName }}</van-col>
      <van-col span="8">
        <van-icon :name="isLogin ? 'cross' : 'arrow'" @click="MyJudge" />
      </van-col>
    </van-row>
    <van-grid square :column-num="3">
      <van-grid-item
        @click="tip"
        v-for="grid in gridArr"
        :key="grid.id"
        :icon="grid.icon"
        :text="grid.type"
      />
    </van-grid>

    <van-popup v-model="show">
      <van-form @submit="onSubmit">
        <van-field
          v-model="userName"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit"
            >提交</van-button
          >
        </div>
      </van-form>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: "User",
  data() {
    return {
      show: false,
      avatarSrc: require("../../assets/avatar.png"),
      isLogin: false,
      userName: "陈博华",
      password: "12345",
      nickName: "点击登录",
      gridArr: [
        { id: 0, icon: "label-o", type: "我的订单" },
        { id: 1, icon: "bill-o", type: "优惠券" },
        { id: 2, icon: "goods-collect-o", type: "礼品卡" },
        { id: 3, icon: "star-o", type: "我的收藏" },
        { id: 4, icon: "flag-o", type: "我的足迹" },
        { id: 5, icon: "contact", type: "会员福利" },
        { id: 6, icon: "location-o", type: "地址管理" },
        { id: 7, icon: "warn-o", type: "账号安全" },
        { id: 8, icon: "service-o", type: "联系客服" },
        { id: 9, icon: "question-o", type: "帮助中心" },
        { id: 10, icon: "smile-comment-o", type: "意见反馈" },
      ],
    };
  },

  created() {
    if (localStorage.getItem("userToken")) {
      this.isLogin = true;
      this.show = false;
      this.nickName = this.userName;
      this.avatarSrc =
        "https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3140403455,2984550794&fm=26&gp=0.jpg";
      var userToken = { name: this.userName, password: this.password };
      var objStr = JSON.stringify(userToken);
      localStorage.setItem("userToken", objStr);
      console.log(JSON.parse(localStorage.getItem("userToken")).name);
    } else {
    }
  },
  methods: {
    tip() {
      if (this.isLogin) {
        this.$toast("该功能玩命开发中");
      } else {
        this.$toast("请先登录");
      }
    },
    goLogin() {
      if (this.isLogin) {
        return;
      } else {
        this.show = true;
      }
    },
    MyJudge() {
      if (this.isLogin) {
        this.$dialog
          .confirm({
            title: "标题",
            message: "确定要退出登录吗",
          })
          .then(() => {
            // on confirm
            (this.nickName = "点击登录"),
              (this.isLogin = false),
              (this.avatarSrc = require("../../assets/avatar.png"));
            localStorage.removeItem("userToken");
          })
          .catch(() => {
            // on cancel
          });
      } else {
      }
    },
    onSubmit() {
      this.isLogin = true;
      this.show = false;
      this.nickName = this.userName;
      this.avatarSrc =
        "https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3140403455,2984550794&fm=26&gp=0.jpg";
      var userToken = { name: this.userName, password: this.password };
      var objStr = JSON.stringify(userToken);
      localStorage.setItem("userToken", objStr);
      console.log(JSON.parse(localStorage.getItem("userToken")).name);

      this.$toast.success("登录成功");

      if (this.$store.state.isLogined) {
      } else {
        this.$store.commit("CHANGEISLOGINED", true);
        this.$toast.loading("即将返回上一页");
        setTimeout(() => {
          this.$router.back();
        }, 1000);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.van-row {
  padding: 0.2rem 4%;
  background-color: #333;
  // background: #410303;
  color: #fff;
  .van-col {
    line-height: 0.7rem;
    font-size: 0.15rem;
    img {
      width: 0.7rem;
      border-radius: 50%;
      display: block;
    }
    &:last-child {
      text-align: right;
    }
  }
}

.login_modal {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
  section {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
  }
  .van-form {
    width: 90%;
    height: 205px;
    position: absolute;
    top: 35vh;
    left: 50%;
    margin-left: -45%;
    padding: 0.1rem;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 3%;
    .van-button {
      background-color: darkred;
      border: 0;
    }
  }
}
.form_bottom {
  text-align: center;
  color: #ccc;
}
</style>